<template>
  <div>
    <router-view class="router-view"></router-view>
    <tabbar class="footTab" style="position: fixed" v-model="selectIndex">
      <tabbar-item :link="{path:'/product',replace:true}">
        <img slot="icon" src="../assets/tab_1.png">
        <img slot="icon-active" src="../assets/tab_1_s.png">
        <span slot="label">产品信息</span>
      </tabbar-item>
      <tabbar-item :link="{path:'/selectPerson',replace:true}">
        <img slot="icon" src="../assets/tab_2.png">
        <img slot="icon-active" src="../assets/tab_2_s.png">
        <span slot="label">透明供应</span>
      </tabbar-item>
      <tabbar-item :link="{path:'/interaction',replace:true}">
        <img slot="icon" src="../assets/tab_3.png">
        <img slot="icon-active" src="../assets/tab_3_s.png">
        <span slot="label">购买交流</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
  import { Tabbar, TabbarItem } from 'vux'

  export default {
    components: {
      Tabbar,
      TabbarItem
    },
    data () {
      return {
        selectIndex: 0
      }
    },
    created () {
      if (this.$route.name === 'Product') {
        this.selectIndex = 0
      } else if (this.$route.name === 'Supply' || this.$route.name === 'SelectPerson') {
        this.selectIndex = 1
      } else if (this.$route.name === 'Interaction') {
        this.selectIndex = 2
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.footTab{
  animation:myfirst 1s;
}
@keyframes myfirst
{
  0%   {bottom: -53px}
}
</style>
